<template>
    <div class="workbench">
        <div class="md:flex">
            <el-card class="flex-1 !border-none mb-4 p-3" shadow="never">
                <template #header>
                    <div class="mb-2.5">
                        <div class="card-title">用户互动数据</div>
                        <div class="text-tx-secondary text-xs flex items-center">
                            <!-- <span v-if="isPc" class="text-circle mr-2"></span>数据时间：{{ workbenchData.today.time }} -->
                        </div>
                    </div>
                </template>
                <div>
                    <el-form ref="formRef" class="mb-[-16px]" :inline="true" label-width="80px">
                        <el-form-item label="日期筛选">
                            <el-date-picker
                                v-model="day_arr"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"
                                @change="areaDay"
                                :clearable="false"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                    <v-charts
                        ref="circleChart"
                        :style="{height: `${isPc?280:175}px`}"
                        :option="workbenchData.circleOption"
                        :autoresize="true"
                    />
                </div>
            </el-card>
        </div>
        <div class="md:flex">
            <el-card class="flex-1 !border-none mb-4 p-3" shadow="never">
                <template #header>
                    <div class="mb-2.5">
                        <div class="card-title">用户行为数据</div>
                        <div class="text-tx-secondary text-xs flex items-center">
                        </div>
                    </div>
                </template>
                <div>
                    <v-charts
                        ref="actionChart"
                        :style="{height: `${isPc?280:175}px`}"
                        :option="workbenchData.actionOption"
                        :autoresize="true"
                    />
                </div>
            </el-card>
        </div>
        <div class="md:flex">
            <el-card class="flex-1 !border-none mb-4 p-3" shadow="never">
                <template #header>
                    <div class="mb-2.5">
                        <div class="card-title">渠道行为数据</div>
                        <div class="text-tx-secondary text-xs flex items-center">
                        </div>
                    </div>
                </template>
                <div>
                    <v-charts
                        ref="channelChart"
                        :style="{height: `${isPc?280:175}px`}"
                        :option="workbenchData.channelOption"
                        :autoresize="true"
                    />
                </div>
            </el-card>
        </div>
        <div class="md:flex">
            <el-card class="flex-1 !border-none mb-4 p-3" shadow="never">
                <template #header>
                    <div class="mb-2.5">
                        <div class="card-title">合作单数据</div>
                        <div class="text-tx-secondary text-xs flex items-center">
                        </div>
                    </div>
                </template>
                <div>
                    <!-- <v-charts
                        ref="cooperaChart"
                        :style="{height: `${isPc?280:175}px`}"
                        :option="workbenchData.cooperaOption"
                        :autoresize="true"
                    /> -->
                    <div class="flex flex-wrap justify-between">
                        <div class=" md:w-1/5" v-for="(item,index) in coopera_list" :key="index">
                            <div class="leading-2.5">{{ item.name }}</div>
                            <div class="text-4xl font-semibold">{{ item.val }}</div>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script lang="ts" setup name="workbencAction">
import vCharts from 'vue-echarts'
import { statisticUserAndChannel, clickData, cooperationStatistics } from '@/api/app'

const isMobile = () => {
    const userAgentInfo = navigator.userAgent;
    const mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
     const mobileFlag = mobileAgents.some((mobileAgent) => {
        return userAgentInfo.indexOf(mobileAgent) > 0;
    });

    return mobileFlag;
}

const isPc = ref(true)
const workbenchData: any = reactive({
    // 圈子数据
    circleOption: {
        xAxis: {
            type: 'category',
            data: [0]
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            show: true,
            orient: 'horizontal',
            x: 'center',
            y: 'bottom',
            itemHeight: 3,
            bottom: '0',
            data: ['动态发布数', '动态发布人数', '发送人数', '接收人数']
        },
        itemStyle: {
            // 点的颜色。
            color: 'red'
        },
        tooltip: {
            trigger: 'axis',
            confine: true,
            backgroundColor: 'rgba(255,255,255,1)',
            textStyle: {
                color: '#333333'
            },
            label:{
               
            },
            formatter: (params: any) => {
                // console.log(params)
                let str = `${params[0].data?.dates}号</br>`;
                params.forEach((item:any)=>{
                    str += `${item.marker}${item.seriesName}&nbsp;&nbsp;&nbsp;&nbsp;   ${item.value}</br>`
                })
                return params.length > 0 ? str: ''
                // return `${params[0].data.dates}号</br>
                //         ${params[0].marker}${params[0].seriesName}&nbsp;&nbsp;&nbsp;   ${params[0].value}</br>
                //         ${params[1].marker}${params[1].seriesName}   ${params[1].value}</br>
                //         ${params[2].marker}${params[2].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   ${params[2].value}</br>
                //         ${params[3].marker}${params[3].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   ${params[3].value}</br>`
            },
        },
        grid: {
            left: "5%",
            top: "10%",
            right: "3%",
            bottom: "15%",
        },

        dataZoom:[],
        series: [
            {
                name: '动态发布数',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
                itemStyle: { color: '#56D99F' }
            },
            {
                name: '动态发布人数',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
                itemStyle: { color: '#FF6900' }
            },
            {
                name: '发送人数',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
                itemStyle: { color: '#809BF3' }
            },
            {
                name: '接收人数',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
                // itemStyle: { color: '#56D99F' }
            }
        ]
    },
    actionOption: {
        xAxis: {
            type: 'category',
            data: [0]
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            show: true,
            orient: 'horizontal',
            x: 'center',
            y: 'bottom',
            itemHeight: 3,
            bottom: '0',
            data: ['首页', '产品库', '渠道商', '服务商', '场地', '工作台', '常用工具', '助融圈', '聊天', '个人中心']
        },
        itemStyle: {
            // 点的颜色。
            color: 'red'
        },
        tooltip: {
            trigger: 'axis',
            confine: true,
            backgroundColor: 'rgba(255,255,255,1)',
            textStyle: {
                color: '#333333'
            },
            label:{
               
            },
            formatter: (params: any) => {
                // console.log(params)
                let str = `${params[0].data.dates}号</br>`;
                params.forEach((item:any)=>{
                    str += `${item.marker}${item.seriesName}&nbsp;&nbsp;&nbsp;&nbsp;   ${item.value}</br>`
                })
                return params.length > 0 ? str: ''
                // return `${params[0].data.dates}号</br>
                //         ${params[0].marker}${params[0].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   ${params[0].value}</br>
                //         ${params[1].marker}${params[1].seriesName}&nbsp;&nbsp;&nbsp;  ${params[1].value}</br>
                //         ${params[2].marker}${params[2].seriesName}&nbsp;&nbsp;&nbsp;   ${params[2].value}</br>
                //         ${params[3].marker}${params[3].seriesName}&nbsp;&nbsp;&nbsp;   ${params[3].value}</br>
                //         ${params[4].marker}${params[4].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   ${params[4].value}</br>
                //         ${params[5].marker}${params[5].seriesName}&nbsp;&nbsp;&nbsp;   ${params[5].value}</br>
                //         ${params[6].marker}${params[6].seriesName}   ${params[6].value}</br>
                //         ${params[7].marker}${params[7].seriesName}&nbsp;&nbsp;&nbsp;   ${params[7].value}</br>
                //         ${params[8].marker}${params[8].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    ${params[8].value}</br>
                //         ${params[9].marker}${params[9].seriesName}   ${params[9].value}</br>`
            },
        },
        grid: {
            left: "5%",
            top: "10%",
            right: "3%",
            bottom: "15%",
        },

        dataZoom:[],
        series: [
            {
                name: '首页',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '产品库',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '渠道商',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '服务商',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '场地',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '工作台',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '常用工具',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '助融圈',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '聊天',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '个人中心',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            }
        ]
    },
    channelOption: {
        xAxis: {
            type: 'category',
            data: [0]
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            show: true,
            orient: 'horizontal',
            x: 'center',
            y: 'bottom',
            itemHeight: 3,
            bottom: '0',
            data: ['助融分', '客户管理', '接单赚钱', '我的单子', '渠道聊天', '渠道助融圈', '渠道产品库', '我的产品库', '我的', '个人中心']
        },
        itemStyle: {
            // 点的颜色。
            color: 'red'
        },
        tooltip: {
            trigger: 'axis',
            confine: true,
            backgroundColor: 'rgba(255,255,255,1)',
            textStyle: {
                color: '#333333'
            },
            label:{
               
            },
            formatter: (params: any) => {
                // console.log(params)
                let str = `${params[0].data.dates}号</br>`;
                params.forEach((item:any)=>{
                    str += `${item.marker}${item.seriesName}&nbsp;&nbsp;&nbsp;&nbsp;   ${item.value}</br>`
                })
                return params.length > 0 ? str: ''
                // return `${params[0].data.dates}号</br>
                //         ${params[0].marker}${params[0].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   ${params[0].value}</br>
                //         ${params[1].marker}${params[1].seriesName}&nbsp;&nbsp;&nbsp;    ${params[1].value}</br>
                //         ${params[2].marker}${params[2].seriesName}&nbsp;&nbsp;&nbsp;    ${params[2].value}</br>
                //         ${params[3].marker}${params[3].seriesName}&nbsp;&nbsp;&nbsp;   ${params[3].value}</br>
                //         ${params[4].marker}${params[4].seriesName}&nbsp;&nbsp;&nbsp;   ${params[4].value}</br>
                //         ${params[5].marker}${params[5].seriesName}   ${params[5].value}</br>
                //         ${params[6].marker}${params[6].seriesName}   ${params[6].value}</br>
                //         ${params[7].marker}${params[7].seriesName}   ${params[7].value}</br>
                //         ${params[8].marker}${params[8].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    ${params[8].value}</br>`
            },
        },
        grid: {
            left: "5%",
            top: "10%",
            right: "3%",
            bottom: "15%",
        },

        dataZoom:[],
        series: [
            {
                name: '助融分',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '客户管理',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '接单赚钱',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '我的单子',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '渠道聊天',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '渠道助融圈',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '渠道产品库',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '我的产品库',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            },
            {
                name: '我的',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
            }
        ]
    },
})
const day_arr:any = ref('')
const circleChart = ref()
const getCityData = async () => {
    let params = {
        start: day_arr.value[0] || '',
        end: day_arr.value[1] || ''
    }
    const res = await statisticUserAndChannel(params)

    // 圈子的数据统计
    let circle_date:any = [];
    let dynamic_count_arr:any = [];
    let dynamic_user_arr:any = [];
    let im_count_arr:any = [];
    let im_user_arr:any = [];
    // console.log(res.behavior_list)
    res.behavior_list.map((item:any) => {
        circle_date.push(item.dates.split('-')[2])
        dynamic_count_arr.push({...item, value: item.dynamic_count})
        dynamic_user_arr.push({...item, value: item.dynamic_user})
        im_count_arr.push({...item, value: item.im_count})
        im_user_arr.push({...item, value: item.im_user})
    })

    workbenchData.circleOption.xAxis.data = []
    workbenchData.circleOption.series[0].data = []
    workbenchData.circleOption.series[1].data = []
    workbenchData.circleOption.series[2].data = []
    workbenchData.circleOption.series[3].data = []

    workbenchData.circleOption.xAxis.data = circle_date;
    workbenchData.circleOption.series[0].data = dynamic_count_arr
    workbenchData.circleOption.series[1].data = dynamic_user_arr
    workbenchData.circleOption.series[2].data = im_count_arr
    workbenchData.circleOption.series[3].data = im_user_arr
    circleChart.value?.setOption({
        ...workbenchData.circleOption
    })
}
getCityData()

const actionChart = ref()
const channelChart = ref();

const areaDay = (e:any) => {
    console.log(e)
    console.log(day_arr.value)
    getCityData()
    getClickData()
    getCoopera()
}
// 行为数据的接口请求
const getClickData = async () => {
    const res = await clickData({
        start: day_arr.value[0] || '',
        end: day_arr.value[1] || ''
    })
    // console.log(res)
    let user_data:any = [];

    res.user_list.forEach((item:any, index:number) => {
        let arr:any = [];
        item.date_list.forEach((itemC:any)=>{
            if (index == 0) {
                user_data.push(itemC.dates.split('-')[2])
                arr.push({...itemC, value: itemC.count})
            } else {
                arr.push({...itemC, value: itemC.count})
            }
            
        })
        workbenchData.actionOption.series[index].data = arr
    })
    workbenchData.actionOption.xAxis.data = user_data;
    // console.log(user_data)
    // console.log(workbenchData.actionOption)
    actionChart.value?.setOption({
        ...workbenchData.actionOption
    })

    res.channel_list.forEach((item:any, index:number) => {
        let arr:any = [];
        item.date_list.forEach((itemC:any)=>{
            if (index == 0) {
                arr.push({...itemC, value: itemC.count})
            } else {
                arr.push({...itemC, value: itemC.count})
            }
            
        })
        workbenchData.channelOption.series[index].data = arr
    })
    workbenchData.channelOption.xAxis.data = user_data;
    channelChart.value?.setOption({
        ...workbenchData.actionOption
    })
}
getClickData();

// const cooperaChart = ref()
const coopera_list:any = ref([])
const getCoopera = async () => {
    const res = await cooperationStatistics({
        start: day_arr.value[0] || '',
        end: day_arr.value[1] || ''
    })
    console.log(res)
    coopera_list.value = res;
}
getCoopera()

onMounted(() => {
    if (isMobile()) {
        // 移动端的图表变化
        isPc.value = false;
    }
})
</script>
<style lang="scss" scoped>
.workbench{
    ::v-deep .el-card__header{
        border: none;
        padding: 0;
    }
    ::v-deep .el-card__body{
        border: none;
        padding: 0;
    }
    ::v-deep .el-table th{
        background-color: #FFFFFF !important;
    }
    .no-pb{
        ::v-deep .el-card__header{
            padding-bottom: 0;
       
        }
    }
    .card-title{
        // font-size: 12px;
        color: #171717;
        font-weight: bold;
    }
    .text-circle{
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 50%; 
        background: #FF6900;
    }
    .up{
       color: #13D897; 
    }
    .down{
        color: #D81313;
    }
    .nav{
        width: 49.5% !important;
    }
    @media (max-width: 575px) {
        .nav {
            width: 100% !important;
        }
    }
    .tab-btn{
        background: #FFFFFF;
        color: #666666;
        border: 1px solid #DBD9D9;
        text-align: center;
        cursor: pointer;
    }
    .tab-active{
        background: #FF6900;
        color: #FFFFFF;
        border:none;
    }
    .tip{
        background: #FAFAFA;
        color: #666666;
    }
    .city-flex{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .city-item{
            width: 80px;
            height: 32px;
            font-size: 12px;
            line-height: 30px;
            color: #999999;
            font-weight: 500;
            text-align: center;
            border-radius: 8px;
            border: 1px solid #DBD9D9;
            margin-right: 8px;
            margin-bottom: 8px;
            cursor: pointer;
        }
        .city-active{
            color: #333333;
            background-color: #E7E7E7;
        }
    }
}

</style>
